<template>
    <div class="order">
        <div class="top">
            <icon class="el-icon-s-order" type="error" size="100"><span>确认订单</span> </icon>
        </div>
        <div class="center">
            <div style="font-size: 18px; margin: 20px 0; color: #333;">收货地址</div>
            <div class="address">
                <ul>
                    <li style=" border: #ff6700 1px solid;">
                        <div>
                            <p class="name">陈同学</p>
                            <p>135800623</p>
                            <p>广东&emsp;广州市&emsp;白云区&emsp;江高镇</p>
                            <p>广东白云学院</p>
                        </div>
                    </li>
                    <li>
                        <div>
                            <p class="name">陈同学</p>
                            <p>135800623</p>
                            <p>广东&emsp;广州市&emsp;白云区&emsp;江高镇</p>
                            <p>广东白云学院</p>
                        </div>
                    </li>
                    <li class="li">
                        <nav class="div">
                            <icon class="el-icon-circle-plus-outline" style="font-size: 35px;"></icon>
                            <p>添加新地址</p>

                        </nav>
                    </li>
                </ul>
            </div>
            <div style="font-size: 18px; margin: 20px 0; color: #333;">商品及优惠券</div>
            <div class="good" v-for="(item, index) in list" :key="index">
                <div class="left">
                    <img :src="'http://101.132.181.9:3000/' + item.productImg" alt="" width="30px" height="30px">
                    <span>{{ item.productName }}</span>
                </div>
                <div class="right">
                    <div><span>{{ item.price }}元x</span><span>{{ item.num }}</span></div>
                    <div style="color: #ff6700; margin-right: 80px;">{{ item.price * item.num }}元</div>
                </div>
            </div>
            <div class="delivery">
                <div style="font-size: 18px; color: #333;">配送方式</div>
                <span style="color: #ff6700; font-size: 14px;">包邮</span>
            </div>
            <div class="invoice">
                <div style="font-size: 18px; color: #333;">发票</div>
                <span style="color: #ff6700; font-size: 14px;">电子发票 &emsp;&emsp; 个人&emsp;&emsp;商品明细</span>
            </div>
            <div class="details">
                <div class="bottom">
                    <ul>
                        <li><span>商品件数：</span><span>{{ this.list.length }}件</span></li>
                        <li><span>商品总价：</span><span>{{ allnum }}元</span></li>
                        <li><span>活动优惠：</span><span>-0元</span></li>
                        <li><span>优惠券抵扣：</span><span>-0元</span></li>
                        <li><span>运费：</span><span>0元</span></li>
                        <li><span>应付总额：</span><span><i style="font-size: 25px;">{{ allnum }}</i> 元</span></li>
                    </ul>
                </div>

            </div>
            <div class="settlement">
                <button style="color: #757575; border: .5px solid #d2cdcd; margin-right: 50px;"
                    @click="$router.go(-1)">返回购物车</button>
                <button style="background-color: #ff6700; color: #fff;" @click="settlement">结算</button>
            </div>
        </div>
    </div>
</template>
<script>
import { settlement } from '../api/api'
export default {
    data() {
        return {
            list: this.$route.query.list
        }
    },
    methods: {
        async settlement() {
            try {
                console.log(this.list);
                let id = this.$store.state.id
               await settlement({products:this.list,user_id:id})
                this.$router.push('/order')
            } catch (error) {

            }

        }
    },
    computed: {
        allnum() {
            let num = 0
            let arr = []
            this.list.forEach(item => {
                if (item === '[object Object]') {
                    this.$router.push('/cat')
                }
                arr.push(item)

            })
            arr.forEach(item => {
                num += item.price * item.num
            })
            return num
        }
    },
    components: {},
    created() {
        this.allnum()
        this.list()
    },
}
</script>
<style lang="scss" scoped>
.order {
    .top {
        line-height: 100px;
        border-bottom: 2px solid #ff6700;

        icon {
            font-size: 32px;

            span {
                padding-left: 10px;
                color: #000;
            }

            margin-right: 20px;
        }

        span {
            margin-top: 10px;
            color: #757575;
        }

    }

    .center {
        color: #757575;
        width: 100%;

        .address {
            width: 100%;

            ul {
                width: 100%;
                display: flex;

                li {
                    width: 270px;
                    height: 195px;
                    border: 1px solid #757575;
                    margin-left: 10px;

                    div {
                        margin-top: 30px;
                        margin-left: 30px;
                    }

                    .name {
                        font-size: 20px;
                    }

                    p {
                        margin-top: 8px;
                        font-size: 14px;
                    }
                }

                .li {
                    .div {
                        text-align: center;
                        margin-top: 80px;
                    }
                }
            }


        }

        .good {
            width: 100%;
            display: flex;
            justify-content: space-between;
            height: 60px;
            align-items: center;
            border-top: 1px solid #bab8b8;
            border-bottom: 1px solid #bab8b8;

            .left {
                display: flex;
                align-items: center;

                img {
                    margin-right: 10px;
                }
            }

            .right {
                width: 550px;
                display: flex;
                justify-content: space-between;
                line-height: 50px;
            }
        }

        .delivery {
            line-height: 80px;
            display: flex;

            div {
                margin-right: 100px;
            }
        }

        .invoice {
            line-height: 80px;
            display: flex;

            div {
                margin-right: 140px;
            }

            border-top: 1px solid #bab8b8;
            border-bottom: 1px solid #bab8b8;
        }

        .details {
            border-bottom: #bab8b8 1px solid;
            width: 100%;
            height: 250px;

            .bottom {
                float: right;
                margin-top: 20px;

                ul {
                    width: 200px;

                    li {
                        margin-top: 15px;
                        display: flex;
                        justify-content: space-between;

                        span:last-child {
                            color: #ff6700;
                        }
                    }
                }
            }

        }

        .settlement {
            float: right;
            height: 100px;

            button {
                border: none;
                width: 200px;
                line-height: 50px;
                margin-top: 20px;
                text-align: center;
            }
        }
    }
}
</style>